<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/icons-extra.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
</head>
<body>


<header class="mui-bar mui-bar-nav top-color">
    <a class="mui-icon mui-icon-left-nav mui-pull-left"
       href="${base!}/open/h5/niantu/userCenter.html"
       style="color: white;"></a>
    <h1 class="mui-title" style="color: white;">
        订单列表
    </h1>
</header>

<!--底部导航栏-->
<footer class="mui-bar-new mui-bar-tab-new" >
    <ul class="ful">
        <li>
            <a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/niantu/index.html'">
                <img src="${base!}/assets/front/newH5/images/icon1.png" alt="" />
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon2.png" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" alt="" />
                <span>购物车</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon3.png" alt="" onclick="window.location.href='${base!}/open/h5/coupon/receiveCoupon.html'" />
                <span>领券中心</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon4.png" alt="" onclick="window.location.href='${base!}/open/h5/niantu/userCenter.html'" />
                <span>个人中心</span>
            </a>
        </li>
    </ul>
</footer>

<div id="vue" style="margin-top: 60px;margin-bottom: 80px;" v-cloak>
    <div class="mui-card"  v-for="item in orderList" :key="item.id">
        <div class="mui-card-header">
            <span v-if="item.payStatus == 0" style="color: #f6c142;">待支付</span>
            <span v-if="item.payStatus == 3 && item.orderStatus!=5" style="color: green;">已支付</span>
            <span v-if="item.payStatus == 3 && item.orderStatus==5" >
                <span v-if="item.feedStatus == 0">已完成</span>
                <span v-if="item.feedStatus == 1">已评价</span>
            </span>
            <span v-if="item.payStatus == 4" >待退款</span>
            <span v-if="item.payStatus == 6" style="color: red;">已退款</span>
            <span>订单号：</span><span>{{item.id}}</span>
        </div>
        <div class="mui-card-content" v-if="item.orderType !='3' ">
            <div class="mui-card-content" v-for="good in item.goodsList" :key="good.id">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media" >
                        <a :href="'${base!}/open/h5/order/goOrderInfo.html?orderId='+item.id">
                            <img class="mui-media-object mui-pull-left" :src="good.imgUrl" style="width: 100px;height: 100px">
                            <div class="mui-media-body" style="white-space:normal;" >
                                <span>{{good.goodsName}}</span>
                                <p class='mui-ellipsis'style="margin-top: 10px;margin-left: 0px;" >
                                    <span class="jiage-text">￥{{good.salePrice/100}}</span><span>*{{good.buyNum}}</span>
                                </p>
                                <span style="margin-top: 10px;display: block;color: #999999;">{{item.orderTime}}</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mui-card-content" v-if="item.orderType =='3' ">
            <div class="mui-card-content">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media" >
                        <a :href="'${base!}/open/h5/order/goOrderInfo.html?orderId='+item.id">
                            <div class="mui-media-body" style="white-space:normal;" >
                                <span>包月视频服务</span>
                                <p class='mui-ellipsis'style="margin-top: 35px;margin-left: 0px;" >
                                    <span class="jiage-text">￥{{item.payMoney/100}}</span>
                                    <span>*1</span>
                                </p>
                                <span>{{item.orderTime}}</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--<div class="mui-card-header">-->
            <!--<button type="button" class="mui-btn mui-btn-success" onclick="location.href='${base!}/open/h5/address/goAddressUp.html'">支付</button>-->
            <!--<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">-->
                <!--取消-->
            <!--</button>-->
        <!--</div>-->
        <div class="mui-card-header" v-if="item.payStatus == 0">
            <span class="orderOut">
                <input type="hidden" :value="item.orderAt" class="orderAt">
                 <input type="hidden" :value="item.id" class="oid">
                剩余支付时间：
                <span style="color: red;" class="syTime">1:59:59</span>
            </span>
        </div>
    </div>
</div>



<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var vue = new Vue({
        el: '#vue',
        data: {
            orderList: [],
        },
        created:function () {   //实例初始化创建完成执行

            this.getMyOrderList()     //调用自身方法
        },
        methods:{              //定义封装方法
            //获取列表
            getMyOrderList:function () {
                var self = this;
                var status = "${status!}";
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/order/getMyOrderList.html",
                    dataType:"JSON",
                    data:{
                        status:status
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.orderList = d;
                            window.setTimeout(function () {
                                self.orderOutTime();
                                self.queryWeiXinOrderStatus(); //查询微信那边订单状态
                            },200);
                        } else {

                        }
                    }
                });

            },
            orderOutTime:function () {
                var self = this;
                window.setInterval(function () {
                    $(".orderOut").each(function () {
                        var orderAt = $(this).find(".orderAt").val();
                        var orderId = $(this).find(".oid").val();
                        console.log("下单时间："+orderAt);
                        //当前时间戳
                        var thisTime = timest();
                        //已过去时间
                        var syTime = thisTime-orderAt;
                        if(syTime>7200){ //已超时
                            $.ajax({
                                type:"POST",
                                url:"${base!}/open/h5/order/delOrder.html",
                                dataType:"JSON",
                                data:{
                                    orderId:orderId
                                },
                                success:function(data){
                                    if (data.code == 0) {
                                        self.getMyOrderList()
                                    } else {

                                    }
                                }
                            });
                        }else {
                            //剩余时间
                            var sysj = 7200-(thisTime-orderAt);
                            var date = timestamp(sysj);
                            $(this).find(".syTime").html(date);
                        }
                    })
                },1000)
            },
            queryWeiXinOrderStatus:function () {
                var self = this;
                window.setTimeout(function () {

                    $(".orderOut").each(function () {
                        var orderId = $(this).find(".oid").val();
                        $.ajax({
                            type: "POST",
                            url: "${base!}/open/h5/pay/queryWeiXinOrderStatus.html",
                            dataType: "JSON",
                            data: {
                                orderId: orderId
                            },
                            success: function (data) {
                                if (data.code == 0) {
                                    self.getMyOrderList();
                                } else {

                                }
                            }
                        });
                    })

                },200);

            }
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }
        },
        watch:{     //监听器
            // carModel:function () {
            //     this.getProvince();
            // }
        }

    })

    function timest() {
        var tmp = Date.parse( new Date() ).toString();
        tmp = tmp.substr(0,10);
        return tmp;
    }


    //处理时间戳
    function timestamp(value) {
        var secondTime = parseInt(value);// 秒
        var minuteTime = 0;// 分
        var hourTime = 0;// 小时
        if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
            //获取分钟，除以60取整数，得到整数分钟
            minuteTime = parseInt(secondTime / 60);
            //获取秒数，秒数取佘，得到整数秒数
            secondTime = parseInt(secondTime % 60);
            //如果分钟大于60，将分钟转换成小时
            if(minuteTime > 60) {
                //获取小时，获取分钟除以60，得到整数小时
                hourTime = parseInt(minuteTime / 60);
                //获取小时后取佘的分，获取分钟除以60取佘的分
                minuteTime = parseInt(minuteTime % 60);
            }
        }
        var result = "" + parseInt(secondTime) + "秒";

        if(minuteTime > 0) {
            result = "" + parseInt(minuteTime) + "分" + result;
        }
        if(hourTime > 0) {
            result = "" + parseInt(hourTime) + "小时" + result;
        }
        return result;
    }



</script>
</body>
</html>
